<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 校园二手书交易平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        .password-card {
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 5px;
            margin-bottom: 30px;
        }
        .password-title {
            margin-bottom: 30px;
            text-align: center;
        }
        .navbar-nav .nav-item {
            margin-right: 15px;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 30px 0;
            margin-top: 50px;
        }
        .password-strength {
            margin-top: 10px;
            height: 5px;
        }
        .password-tips {
            list-style-type: none;
            padding-left: 0;
            margin-top: 15px;
        }
        .password-tips li {
            margin-bottom: 5px;
            color: #6c757d;
        }
        .password-tips li.valid {
            color: #28a745;
        }
        .password-tips li i {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">校园二手书交易平台</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/book/list">书籍列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/book/publish">发布书籍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/book/my-books">我的书籍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/order/my-orders">我的订单</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown active">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                            <span sec:authentication="name"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="/user/profile">个人信息</a>
                            <a class="dropdown-item active" href="/user/change-password">修改密码</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/logout">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面内容 -->
    <div class="container mt-4">
        <!-- 导航面包屑 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item"><a href="/user/profile">个人信息</a></li>
                <li class="breadcrumb-item active" aria-current="page">修改密码</li>
            </ol>
        </nav>
        
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="password-card">
                    <h2 class="password-title">修改密码</h2>
                    
                    <!-- 提示信息区域 -->
                    <div id="alertContainer"></div>
                    
                    <form id="passwordForm">
                        <div class="form-group">
                            <label for="oldPassword">当前密码</label>
                            <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="newPassword">新密码</label>
                            <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                            <div class="progress password-strength">
                                <div id="password-strength-meter" class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <ul class="password-tips">
                                <li id="length-check"><i class="fas fa-times-circle"></i> 密码长度至少为6位</li>
                                <li id="uppercase-check"><i class="fas fa-times-circle"></i> 包含至少一个大写字母</li>
                                <li id="lowercase-check"><i class="fas fa-times-circle"></i> 包含至少一个小写字母</li>
                                <li id="number-check"><i class="fas fa-times-circle"></i> 包含至少一个数字</li>
                            </ul>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirmPassword">确认新密码</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>更新密码</button>
                            <a href="/user/profile" class="btn btn-secondary ml-2">返回个人信息</a>
                        </div>
                    </form>
                </div>
                
                <div class="alert alert-warning">
                    <h5><i class="fas fa-exclamation-triangle"></i> 安全提醒</h5>
                    <p>密码是您账户安全的第一道防线，请注意：</p>
                    <ul>
                        <li>不要使用与其他网站相同的密码</li>
                        <li>不要分享您的密码给任何人</li>
                        <li>定期更换您的密码</li>
                        <li>使用强密码可增强账户安全性</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>关于我们</h5>
                    <p>校园二手书交易平台是为高校学生设计的便捷二手书交易系统，旨在促进校园内书籍的循环利用，降低学习成本。</p>
                </div>
                <div class="col-md-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-white">首页</a></li>
                        <li><a href="/book/list" class="text-white">书籍列表</a></li>
                        <li><a href="/register" class="text-white">注册</a></li>
                        <li><a href="/login" class="text-white">登录</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <address>
                        <strong>校园二手书交易平台</strong><br>
                        邮箱: contact@booktrading.com<br>
                        电话: (123) 456-7890
                    </address>
                </div>
            </div>
            <hr class="bg-light">
            <div class="text-center">
                <p>&copy; 2023 校园二手书交易平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script>
        $(document).ready(function() {
            var lengthValid = false;
            var uppercaseValid = false;
            var lowercaseValid = false;
            var numberValid = false;
            var passwordsMatch = false;
            
            // 新密码输入事件
            $('#newPassword').keyup(function() {
                var password = $(this).val();
                
                // 检查密码长度
                lengthValid = password.length >= 6;
                updateCheckItem('length-check', lengthValid);
                
                // 检查大写字母
                uppercaseValid = /[A-Z]/.test(password);
                updateCheckItem('uppercase-check', uppercaseValid);
                
                // 检查小写字母
                lowercaseValid = /[a-z]/.test(password);
                updateCheckItem('lowercase-check', lowercaseValid);
                
                // 检查数字
                numberValid = /[0-9]/.test(password);
                updateCheckItem('number-check', numberValid);
                
                // 更新密码强度指示器
                updatePasswordStrength();
                
                // 检查密码确认
                checkPasswordMatch();
                
                // 检查是否可以启用提交按钮
                checkEnableSubmit();
            });
            
            // 确认密码输入事件
            $('#confirmPassword').keyup(function() {
                checkPasswordMatch();
                checkEnableSubmit();
            });
            
            // 表单提交
            $('#passwordForm').submit(function(e) {
                e.preventDefault();
                
                // 获取表单数据
                var oldPassword = $('#oldPassword').val();
                var newPassword = $('#newPassword').val();
                
                // 发送请求
                $.ajax({
                    type: 'POST',
                    url: '/user/change-password',
                    data: {
                        oldPassword: oldPassword,
                        newPassword: newPassword
                    },
                    success: function(response) {
                        if (response.success) {
                            showAlert('success', response.message);
                            // 成功后清空表单
                            $('#passwordForm')[0].reset();
                            // 重置验证状态
                            resetValidation();
                        } else {
                            showAlert('danger', response.message);
                        }
                    },
                    error: function() {
                        showAlert('danger', '系统错误，请稍后再试');
                    }
                });
            });
            
            // 更新验证项图标和样式
            function updateCheckItem(id, isValid) {
                var element = $('#' + id);
                if (isValid) {
                    element.html('<i class="fas fa-check-circle"></i> ' + element.text().substring(2));
                    element.addClass('valid');
                } else {
                    element.html('<i class="fas fa-times-circle"></i> ' + element.text().substring(2));
                    element.removeClass('valid');
                }
            }
            
            // 更新密码强度指示器
            function updatePasswordStrength() {
                var strength = 0;
                if (lengthValid) strength += 25;
                if (uppercaseValid) strength += 25;
                if (lowercaseValid) strength += 25;
                if (numberValid) strength += 25;
                
                var meter = $('#password-strength-meter');
                meter.css('width', strength + '%');
                
                if (strength <= 25) {
                    meter.removeClass().addClass('progress-bar bg-danger');
                } else if (strength <= 50) {
                    meter.removeClass().addClass('progress-bar bg-warning');
                } else if (strength <= 75) {
                    meter.removeClass().addClass('progress-bar bg-info');
                } else {
                    meter.removeClass().addClass('progress-bar bg-success');
                }
            }
            
            // 检查密码匹配
            function checkPasswordMatch() {
                var password = $('#newPassword').val();
                var confirmPassword = $('#confirmPassword').val();
                
                if (confirmPassword.length > 0) {
                    passwordsMatch = (password === confirmPassword);
                    if (passwordsMatch) {
                        $('#confirmPassword').removeClass('is-invalid').addClass('is-valid');
                    } else {
                        $('#confirmPassword').removeClass('is-valid').addClass('is-invalid');
                    }
                } else {
                    $('#confirmPassword').removeClass('is-valid is-invalid');
                    passwordsMatch = false;
                }
            }
            
            // 检查是否可以启用提交按钮
            function checkEnableSubmit() {
                var oldPasswordValid = $('#oldPassword').val().length > 0;
                var allValid = lengthValid && passwordsMatch && oldPasswordValid;
                
                $('#submitBtn').prop('disabled', !allValid);
            }
            
            // 重置验证状态
            function resetValidation() {
                lengthValid = false;
                uppercaseValid = false;
                lowercaseValid = false;
                numberValid = false;
                passwordsMatch = false;
                
                updateCheckItem('length-check', false);
                updateCheckItem('uppercase-check', false);
                updateCheckItem('lowercase-check', false);
                updateCheckItem('number-check', false);
                
                $('#password-strength-meter').css('width', '0%');
                $('#confirmPassword').removeClass('is-valid is-invalid');
                $('#submitBtn').prop('disabled', true);
            }
            
            // 显示警告信息
            function showAlert(type, message) {
                var alert = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                    '</div>';
                $('#alertContainer').html(alert);
                
                // 滚动到顶部
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        });
    </script>
</body>
</html> 